<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
	<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$('#ritumodal').modal({

			'show' : true,
			'backdrop' : 'static',
			'display' : 'none'
		});

	});
	
	//TO GENERATE NEW FILTER ADDITION ROW
	function tryFunc(node) {
		var root = node.parentNode.parentNode;
		var allRows = root.getElementsByTagName('tr');
		var cRow = allRows[1].cloneNode(true);
		root.appendChild(cRow);
	}

	// to hide the loading img
	function preloader() {
		document.getElementById("loading").style.display = "none";
	}
	window.onload = preloader;
	
	function onLinkClick() {
		document.getElementById("Button1").style.display = "none";
		document.getElementById("Button2").style.display = "none";
		document.getElementById("Button3").style.display = "none";
		document.getElementById("loading").style.display = "block";
	}

</script>

<style>
.input-myText {
	width: 5px;
	min-height: 30px;
}

.ritumodal {
	position: fixed;
	top: 50%;
	left: 41%;
	z-index: 1050;
	width: 850px;
	margin: -250px 0 0 -280px;
	background-color: #ffffff;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, 0.3);
	*border: 1px solid #999;
	/* IE6-7 */
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
	outline: none;
}

.modal.fade {
	-webkit-transition: opacity .3s linear, top .3s ease-out;
	-moz-transition: opacity .3s linear, top .3s ease-out;
	-o-transition: opacity .3s linear, top .3s ease-out;
	transition: opacity .3s linear, top .3s ease-out;
	top: -25%;
}
</style>

</head>
<body>
	<form name="myForm">
		<div id="ritumodal" class="ritumodal hide fade">
		<div class="modal-header">
			<!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> -->
			<h4>ORDER BY CLAUSE</h4>
		</div>
		<div style="border:2px solid #ccc; width:840px; height: 200px; overflow-y: scroll;" align="right">
		  
		    <table class="table table-striped table-bordered" theme="simple">
		    <tr>
							<th align="right">Column Name</th>
							<th align="right" colspan="2">Order Type</th>
							
			</tr>
		    <tr>
		       <td><s:select name="columns" list="selectedTablecol"
										headerKey="-1" id="columns" headerValue="Choose Column"
										theme="simple" title="Columns List" /></td>
		    
		      <!-- <td><input type="checkbox" name="order1" value="Ascending" checked="checked"/>&nbsp;ASC</td> -->
		      <td><input type="checkbox" name="order2" value="Descending"/>&nbsp;DESC</td>
		      </tr>
		    <tr >
							<td colspan="4">
								<button class="btn btn-success" type="button"
									onclick="tryFunc(this.parentNode);">Add More</button>
							</td>
						</tr>
		    </table>
		</div>
		
		<div class="modal-footer">
			<a href="closemodal" class="btn btn-primary">close</a>
		</div>
	</div>	
	</form>



</body>
</html>